<template>
  <div class="play-box">
    <div class="title">{{ renderData.playTypeName }}</div>
    <subGameVav :data="renderData.lotteryPlayTypeList" @selectPlayType="selectPlayType"></subGameVav>
    <div class="game-nav-underline"></div>

    <div class="play-odds">
      <OddsBtn
        @selectOdds="selectNumber(numItem, renderData.playTypeName)"
        v-for="(numItem, index) in getNumOddsList"
        :data="{ number: numItem.playName, odds: numItem.maxOdds, color: numItem.color }"
        :key="index"
        :class="{ selected: getSelectNumOddsList.includes(numItem) }"
      />
    </div>
  </div>
</template>

<script>
import OddsBtn from './odds-btn.vue'
import subGameVav from './sub-game-nav.vue'
import mixin from '@/mixin/xglhc-mixin.js'
import { NUMBER_CLR_MAP } from '@/components/game/xglhc/xglhc-constant'
export default {
  components: {
    OddsBtn,
    subGameVav,
  },
  mixins: [mixin],
  props: { renderData: {} },
  watch: {
    currentList: {
      handler(list) {
        list.forEach((item) => NUMBER_CLR_MAP[item.playName] && (item['color'] = NUMBER_CLR_MAP[item.playName]))
      },
      deep: true,
      immediate: true,
    },
  },
}
</script>

<style scoped lang="less">
@import url('./common.less');
</style>
